<template>
  <div class="demo">
    <div class="list" v-show="info.users.length" v-for="user in info.users" :key="user.id">
        <a :href="user.html_url" target="_blank">
            <img :src="user.avatar_url" alt="">
        </a>
        <p>{{user.login}}</p>
    </div>
    <h2 v-show="info.isFirst">welcome to user</h2>
    <h2 v-show="info.isLoading">is Loading...</h2>
    <h2 v-show="info.errMsg">出错了：{{info.errMsg}}</h2>
  </div>
</template>

<script>
export default {
    name:'List',
    data() {
        return {
            info:{
                isFirst:true,
                isLoading:false,
                errMsg:'',
                users:[]
            }
            
        }
    },
    mounted(){
        this.$bus.$on("getData",userObj=>{
            // console.log(userObj);
            this.info = {...this.info,...userObj};
        })
    }
}
</script>

<style>
    .demo{
        display:flex;
        flex-wrap: wrap;
        align-content: space-between;
        width: 900px;
    }
    .list{
        margin: 20px;
        text-align: center;
    }
    .list img{
        width:100px;
        height:100px;
    }
    .list p {
        margin: 0;
    }
</style>